<template>
	<page-meta :page-style="'overflow:'+(popupImg||isDrawPop||isHDDrawPop||oldManMode?'hidden':'visible')"></page-meta>
	<view class="groupjoin" :style="'padding-bottom:'+pagebottom+'%;'">
		<view class="group_join_box" v-if="showPage">
			<view class="display_flex mt-30" v-if="step<4">
				<view class="popup_title_block"></view>
				<view class="f-16 ml-5" v-if="step==0">请完善您的头像和昵称</view>
				<view class="f-16 ml-5" v-if="step==1">请选择您的用车场景</view>
				<view class="f-16 ml-5" v-if="step==2">请选择您要加入的车友会</view>
				<view class="f-16 ml-5" v-if="step==3">请填写您的入会信息</view>
			</view>
			<view class="step_box">
				<view v-if="step==1" class="mt-20 step1_box">
					<uni-row :gutter="30">
						<uni-col v-for="(item,index) in scenelist" :key="item.id" :span="12">
							<view class="old_popup_step_img_box"
								@click="choiceScene(item.id,index,item.status,item.text)">
								<image class="old_popup_step_img" :src="picUrl+item.pic" mode="aspectFill"></image>
								<view class="old_popup_step_text">{{item.text}}</view>
								<uni-icons v-if="item.status==0" class="old_circle_icon" type="circle" size="18"
									color="#ffffff"></uni-icons>
								<uni-icons v-else class="old_circle_icon" type="circle-filled" size="18"
									color="#00A0DC"></uni-icons>
								<view class="overlay"></view>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="mt-20" v-if="step==2">
					<view class="mt-20 f-12">
						<uni-data-select class="step_select" v-model="city_id" :localdata="citylist" @change="changeP"
							placeholder="请选择城市"></uni-data-select>
					</view>
					<view class="mt-20 f-12">
						<uni-data-select class="step_select" v-model="company_id" :localdata="companylist"
							@change="changeJ" placeholder="请选择经销商"></uni-data-select>
					</view>
					<view v-for="(item,index) in companyGrouplist" :key="item.club_id"
						:class="club_id==item.club_id?'step_groupbox step_groupbox_active':'step_groupbox'">
						<view class="display_flex" @click="changeClub(item.club_id)">
							<view class="group_img_box">
								<image class="group_img" :src="picUrl+item.logo" mode="aspectFill"></image>
								<image v-if="item.club_border" class="group_border_img" :src="picUrl+item.club_border"
									mode="aspectFill"></image>
							</view>
							<view class="ml-15">
								<view class="f-14 f-w">{{item.title}}</view>
								<view class="groupinfo_desc ellipsis-2">
									<text>{{item.desc}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="step==3">
					<view class="avatar_box">
						<button class="weui-cell weui-memberinfo avatar_btn" open-type="chooseAvatar"
							@chooseavatar="bindchooseavatar">
							<image class="avatar"
								:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:onlinePic+'avatar.png'"
								mode="aspectFill">
							</image>
						</button>
						<view class="f-14 mt-10">点击更改头像</view>
					</view>
					<view class="pop_input_box">
						<view style="width: 110rpx;">昵称</view>
						<input type="nickname" class="pop_input flex-1 ml-20" @input="changeName" @blur="changeName"
							v-model="userinfo.wx_username" />
					</view>
					<view class="pop_input_box">
						<view style="width: 110rpx;">姓名</view>
						<input class="pop_input flex-1 ml-20" v-model="name" maxlength="8" />
					</view>
					<view class="pop_input_box">
						<view style="width: 110rpx;">电话</view>
						<input class="pop_input flex-1 ml-20" type="number" v-model="mobile" maxlength="11" />
					</view>
					<view class="pop_input_box">
						<view style="width: 110rpx;">性别</view>
						<view class="display_flex ml-20" @click="changeSex(1)">
							<uni-icons v-if="sex==1" type="circle-filled" size="20" color="#191919"></uni-icons>
							<uni-icons v-else type="circle" color="#191919" size="20"></uni-icons>
							<span>男</span>
						</view>
						<view class="display_flex ml-25" @click="changeSex(2)">
							<uni-icons v-if="sex==2" type="circle-filled" size="20" color="#191919"></uni-icons>
							<uni-icons v-else type="circle" color="#191919" size="20"></uni-icons>
							<span>女</span>
						</view>
					</view>
					<view class="pop_input_box">
						<view style="width: 110rpx;">出生日期</view>
						<view class="display_flex flex-1 ml-20" style="justify-content: space-around;">
							<uni-datetime-picker type="date" v-model="birthday" :end="birthday_end" :border="false"
								:clear-icon="false" placeholder="选择出生日期" />
						</view>
						<uni-icons type="down" size="14" color="#191919"></uni-icons>
					</view>
					<view v-for="(item,index) in carslist" :key="index" class="pop_car_box">
						<view class="f-14 mb-10">您的车辆信息</view>
						<view class="pop_input_box">
							<uni-data-select class="flex-1" v-model="item.car_series" :localdata="seriesList"
								:clear="false" placeholder="您的车系"></uni-data-select>
						</view>
						<view class="pop_carimg_box">
							<view class="f-14 mb-10">上传行驶证</view>
							<view class="pop_carimg_cell" style="height: 300rpx;" v-if="item.car_license">
								<image style="height: 300rpx;width: 100%;border-radius: 8rpx;"
									:src="picUrl+item.car_license" mode="aspectFill"></image>
							</view>
							<view v-else class="pop_carimg_cell" style="height: 300rpx;" @click="uploadCarsImg(index)">
								<uni-icons type="plus-filled" color="#00A0DC" size="30"></uni-icons>
							</view>
						</view>
						<view class="text-r" v-if="carslist.length>1">
							<uni-icons @click="delCars(index)" type="trash" size="14" color="#191919"></uni-icons>
						</view>
					</view>

					<view class="text-c mt-20" v-if="carslist.length<3">
						<view class="c-00A0DC f-16" style="text-decoration: underline;" @click="addCars">增加车辆</view>
						<view class="c-999999 f-12 mt-5">- 还可添加{{3-carslist.length}}辆 -</view>
					</view>
				</view>
				<view v-if="step==4">
					<view class="audit_box">
						<image v-if="status==0" class="audit_img" :src="onlinePic+'audit_ing.png'"></image>
						<image v-if="status==1" class="audit_img" :src="onlinePic+'audit_ok.png'"></image>
						<image v-if="status==2" class="audit_img" :src="onlinePic+'audit_no.png'"></image>
						<view class="f-18 f-w mt-5">{{status_text}}</view>
						<view :class="status==2?'f-12 mt-5 c-red':'f-12 mt-5'">
							<text>{{refuse_reason}}</text>
						</view>
					</view>
					<view class="group_audit_result_box">
						<view class="group_audit_result_cell">
							<span class="c-gray f-11">姓名</span>
							<span class="f-13 ml-15">{{name}}</span>
						</view>
						<view class="group_audit_result_cell">
							<span class="c-gray f-11">电话</span>
							<span class="f-13 ml-15">{{mobile}}</span>
						</view>
						<view class="group_audit_result_cell">
							<span class="c-gray f-11">您要加入的车友会</span>
							<span class="f-13 ml-15">{{club_title}}</span>
						</view>
						<view class="group_carslist_box">
							<view class="f-14 mb-10">车辆信息</view>
							<view class="group_carslist_cell mt-5">
								<view class="group_audit_result_cell">
									<span class="c-gray f-11">车系</span>
									<span class="f-13 ml-15">{{car_series_one}}</span>
								</view>
								<view class="c-gray f-11 mt-10" style="margin-left: 25rpx;">行驶证</view>
								<view class="pd-20">
									<view class="pop_carimg_cell" style="height: 300rpx;">
										<image style="height: 300rpx;width: 100%;border-radius: 8rpx;"
											:src="picUrl+car_license_one" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view v-if="car_series_two" class="group_carslist_cell mt-5">
								<view class="group_audit_result_cell">
									<span class="c-gray f-11">车系</span>
									<span class="f-13 ml-15">{{car_series_two}}</span>
								</view>
								<view class="c-gray f-11 mt-10" style="margin-left: 25rpx;">行驶证</view>
								<view class="pd-20">
									<view class="pop_carimg_cell" style="height: 300rpx;">
										<image style="height: 300rpx;width: 100%;border-radius: 8rpx;"
											:src="picUrl+car_license_two" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view v-if="car_series_three" class="group_carslist_cell mt-5">
								<view class="group_audit_result_cell">
									<span class="c-gray f-11">车系</span>
									<span class="f-13 ml-15">{{car_series_three}}</span>
								</view>
								<view class="c-gray f-11 mt-10" style="margin-left: 25rpx;">行驶证</view>
								<view class="pd-20">
									<view class="pop_carimg_cell" style="height: 300rpx;">
										<image style="height: 300rpx;width: 100%;border-radius: 8rpx;"
											:src="picUrl+car_license_three" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view @click="nextStep()" class="mt-40">
				<view v-if="step<3" class="group_public_btn_block">
					<image class="next_btn_arrow mr-10" :src="onlinePic+'next_btn_arrow.png'"></image>
					下一步
				</view>
				<view v-if="step==3" class="group_public_btn_block">确认提交申请</view>
				<view v-if="step==4">
					<view v-if="status==0||status==2" class="group_public_btn_block">重新提交</view>
					<view v-if="status==1" class="group_public_btn_block">进入车友会</view>
				</view>
			</view>
			<view v-if="step==1" @click="oldManMode=true" class="group_public_btn_empty mt-15"
				style="font-size: 36rpx;letter-spacing: 1rpx;">切换关怀模式</view>
		</view>

		<view v-if="popupImg||isDrawPop||isHDDrawPop" class="guide_mask_box" @click="closePopup"></view>
		<view class="popup_img_box" v-if="popupImg">
			<image class="popup_img" :src="onlinePic+'popup_img.png'" mode="widthFix"></image>
			<view class="popup_text_box">
				<text>{{popup_text}}</text>
			</view>
			<view class="pop_close_icon_box">
				<uni-icons class="pop_close_icon" @click="closePopup" type="close" color="#ffffff"
					size="50"></uni-icons>
			</view>
		</view>
		<view class="draw_pop" v-if="isDrawPop">
			<image class="win_pop_img" :src="picUrl+lotteryinfo.popup" mode="widthFix"></image>
			<view class="draw_pop_text">
				<view class="f-20 f-w mt-20">{{lotteryinfo.popup_title}}</view>
				<view class="f-18 mt-5">
					<text>{{lotteryinfo.popup_desc}}</text>
				</view>
			</view>
			<view class="draw_pop_btn" @click="goDrawPage">立即抽奖</view>
			<view class="draw_pop_close_icon_box">
				<uni-icons class="draw_pop_close_icon" @click="closeDrawPopup" type="close" color="#ffffff"
					size="50"></uni-icons>
			</view>
		</view>
		<view v-if="isDraw&&step==4" class="draw_tips_box" @click="goDrawPage">
			<image class="draw_tips_img" :src="picUrl+lotteryinfo.icon"></image>
		</view>
		<view class="draw_pop" v-if="isHDDrawPop">
			<image class="win_pop_img" :src="picUrl+hdlotteryinfo.popup" mode="widthFix"></image>
			<view class="draw_pop_text">
				<view class="f-20 f-w mt-20">{{hdlotteryinfo.popup_title}}</view>
				<view class="f-18 mt-5">
					<text>{{hdlotteryinfo.popup_desc}}</text>
				</view>
			</view>
			<view class="draw_pop_btn" @click="goHdDrawPage">立即抽奖</view>
			<view class="draw_pop_close_icon_box">
				<uni-icons class="draw_pop_close_icon" @click="closeDrawPopup" type="close" color="#ffffff"
					size="50"></uni-icons>
			</view>
		</view>
		<view v-if="oldManMode" class="guide_mask_box" @click="oldManMode=false"></view>
		<view v-if="oldManMode" class="oldman_pop_box">
			<view class="text-c">
				<image class="oldman_pop_img" :src="onlinePic+'oldman_pop_img.png'"></image>
				<view class="f-21 f-w mt-20">进入关怀模式后</view>
				<view class="f-21 f-w">将开启以下功能</view>
			</view>
			<view class="c-666666 f-16 mt-40 ml-10">· 文字更大，视觉更清晰</view>
			<view class="c-666666 f-16 ml-10 mt-5">· 入会流程简化，操作便捷</view>
			<view class="group_public_btn_block" style="margin-top: 104rpx;border: 1rpx solid #00A0DC;font-size: 36rpx;"
				@click="openOldManPage">进入关怀模式</view>
			<view class="group_public_btn_empty mt-20" style="font-size: 36rpx;" @click="oldManMode=false">暂不进入</view>
		</view>
	</view>
</template>

<script>
	import {
		getCityList,
		getCompanyList,
		submitClubJion,
		getClubJionInfo,
		getClubInfo,
		getClubCarSeries,
		getLotteryInfo,
		getHuodongLotteryInfo,
		getGroupUserInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				step: 1,
				value: 0,
				name: '',
				mobile: '',
				sex: '',
				birthday: '',
				car_series_one: '',
				car_model_one: '',
				car_license_one: '',
				car_series_two: '',
				car_model_two: '',
				car_license_two: '',
				car_series_three: '',
				car_model_three: '',
				car_license_three: '',
				birthday_end: '',
				club_title: '',
				citylist: [],
				city_id: '',
				city_name: '',
				companylist: [],
				company_id: '',
				company_name: '',
				cjActive: [],
				carimglist: [],
				driver_card: [],
				license: [],
				scenelist: [],
				club_id: 0,
				join_id: 0,
				companyGrouplist: [],
				seriesList: [],
				carslist: [{
					car_series: '',
					// car_model: '',
					car_license: '',
					// modelList: [],
				}],
				popupImg: false,
				showPopup: false,
				showPage: false,
				status: 0,
				status_text: '',
				refuse_reason: '',
				popup_text: '',
				isSubmit: true,
				isDrawPop: false, //status:0:没有抽奖机会，1：可以抽奖；2：已抽奖   浮窗  12都显示  弹窗 1显示2不显示
				isDraw: false,
				lotteryinfo: '',
				hdlotteryinfo: '',
				isHDDrawPop: false,
				oldManMode: false,
				userinfo: uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo') : '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pagebottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? 45 : 22,
				btnbottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? 13 : 4,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.userinfo = uni.getStorageSync('userinfo')
				if (uni.getStorageSync('clubconfig')) {
					var list = uni.getStorageSync('clubconfig').scene_arr ? uni.getStorageSync('clubconfig').scene_arr : []
					if (list.length > 0) {
						list.forEach(function(item, index) {
							item.status = 0
						});
						this.scenelist = list
					}
				}
				if (uni.getStorageSync('access_token')) {
					uni.showLoading()
					this.getClubJionInfo()
					// this.getLotteryInfo()
				}
				uni.removeStorage({
					key: 'onload'
				})
			}
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			this.birthday_end = year + '-' + month + '-' + day
			this.query = uni.createSelectorQuery().in(this);
		},
		onLoad(options) {
			console.log('groupjoin↓↓↓↓')
			console.log(options)
			if (options.club_id) {
				this.club_id = options.club_id ? options.club_id : 0
				this.getCityList()
				this.getClubInfo()
			}
			this.getClubCarSeries()
			if (uni.getStorageSync('clubconfig')) {
				var list = uni.getStorageSync('clubconfig').scene_arr ? uni.getStorageSync('clubconfig').scene_arr : []
				if (list.length > 0) {
					list.forEach(function(item, index) {
						item.status = 0
					});
					this.scenelist = list
				}
			}
			if (uni.getStorageSync('access_token')) {
				uni.showLoading()
				this.getClubJionInfo()
			}
			var params = {
				event_code: '加入车友会',
				path: 'pages/group/groupjoin',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getLotteryInfo() {
				getLotteryInfo().then(res => {
					if (res.state == 1) {
						this.lotteryinfo = res.data.info
						if (res.data.info.status == 0) {
							this.isDrawPop = false
							this.isDraw = false
						} else if (res.data.info.status == 1) {
							this.isDrawPop = true
							this.isDraw = true
						} else if (res.data.info.status == 2) {
							this.isDraw = true
						}

					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getLotteryInfod() {
				var that = this
				getLotteryInfo().then(res => {
					if (res.state == 1) {
						that.lotteryinfo = res.data
							.info
						if (res.data.info.status ==
							0) {
							that.isDrawPop = false
							that.isDraw = false
							that.popupImg = true
						} else if (res.data.info
							.status == 1) {
							that.isDrawPop = true
							that.isDraw = true
						} else if (res.data.info
							.status == 2) {
							that.isDraw = true
							that.popupImg = true
						}

					} else {
						uni.showToast({
							title: res.error[
								0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getClubInfo() {
				getClubInfo({
					club_id: this.club_id,
					is_has_club: 1
				}).then(res => {
					if (res.state == 1) {
						this.city_id = res.data.info.city_id
						this.company_id = res.data.info.company_id
						this.companyGrouplist = []
						this.getCompanyList()
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getClubJionInfo() {
				getClubJionInfo({}).then(res => {
					if (res.state == 1) {
						var info = res.data.info
						if (info.care_status == 1) {
							uni.redirectTo({
								url: '/pages/group/groupoldmanjoin'
							})
						} else {
							uni.hideLoading()
							if (info.status == 0 || info.status == 1 || info.status == 2) {
								this.club_id = info.club_id
								this.join_id = info.join_id
								this.step = 4
								this.showPage = true
								this.status = info.status
								this.name = info.name
								this.mobile = info.mobile
								this.club_title = info.club_title
								this.license = info.license
								this.license_one = info.license_one
								this.license_two = info.license_two
								this.status_text = info.status_text
								this.refuse_reason = info.refuse_reason
								this.popup_text = info.popup_text
								this.sex = info.sex
								this.birthday = info.birthday
								this.car_series_one = info.car_series_one
								// this.car_model_one = info.car_model_one
								this.car_license_one = info.car_license_one
								this.car_series_two = info.car_series_two
								// this.car_model_two = info.car_model_two
								this.car_license_two = info.car_license_two
								this.car_series_three = info.car_series_three
								// this.car_model_three = info.car_model_three
								this.car_license_three = info.car_license_three
							} else {
								this.showPage = true
							}
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			closePopup() {
				this.popupImg = false
				uni.navigateBack({
					delta: 1
				})
			},
			closeDrawPopup() {
				this.isDrawPop = false
				this.isHDDrawPop = false
			},
			goDrawPage() {
				if (this.lotteryinfo.status == 1 || this.lotteryinfo.status == 2) {
					uni.navigateTo({
						url: '/pages/draw/draw'
					})
				}
				this.isDrawPop = false
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '立即抽奖',
					value: '',
				}
				app.BurialPoint(params)
			},
			goHdDrawPage() {
				if (this.hdlotteryinfo.status == 1) {
					uni.navigateTo({
						url: '/pages/draw/huodongdraw'
					})
				} else if (this.hdlotteryinfo.status == 2) {
					if (this.hdlotteryinfo.gifts_status == 0) {
						uni.navigateTo({
							url: '/pages/draw/huodongdraw'
						})
					} else {
						uni.navigateTo({
							url: '/pages/draw/huodongdrawresult'
						})
					}
				}
				this.isHDDrawPop = false
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '立即抽奖',
					value: '',
				}
				app.BurialPoint(params)
			},
			getCityList() {
				getCityList({}).then(res => {
					if (res.state == 1) {
						this.citylist = res.data.list
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeP(e) {
				var that = this
				that.citylist.forEach(function(item, index) {
					if (item.value == e) {
						that.city_id = e
						that.city_name = item.text
					}
				});
				that.companyGrouplist = []
				that.company_id = ''
				that.companylist = []
				that.club_id = ''
				that.getCompanyList()
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-选择城市',
					value: '',
				}
				app.BurialPoint(params)
			},
			getCompanyList() {
				getCompanyList({
					club_id: this.club_id,
					city_id: this.city_id,
					is_has_club: 1
				}).then(res => {
					if (res.state == 1) {
						this.companylist = res.data.list
						if (this.company_id) {
							var that = this
							that.companylist.forEach(function(item, index) {
								if (item.value == that.company_id) {
									that.companyGrouplist = item.club
								}
							});
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeJ(e) {
				var that = this
				that.company_id = e
				that.companylist.forEach(function(item, index) {
					if (item.value == e) {
						that.companyGrouplist = item.club
						that.club_id = that.companyGrouplist[0].club_id
					}
				});
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-选择经销商',
					value: '',
				}
				app.BurialPoint(params)
			},
			changeClub(club_id) {
				this.club_id = club_id
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-选择车友会',
					value: '',
				}
				app.BurialPoint(params)
			},
			choiceScene(id, index, status, text) {
				var that = this
				var status = that.scenelist[index].status == '1' ? 0 : 1
				that.scenelist[index].status = status
				setTimeout(function() {
					var list = []
					that.scenelist.forEach(function(item, index) {
						if (item.status == 1) {
							list.push(item.text)
						}
					});
					that.cjActive = list
					that.scene = list.join(',')
					console.log(that.scene)
				}, 10)
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-选择场景',
					value: '',
				}
				app.BurialPoint(params)
			},
			changeSex(type) {
				this.sex = type
			},
			getClubCarSeries() {
				getClubCarSeries().then(res => {
					if (res.state == 1) {
						this.seriesList = res.data.info
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			addCars() {
				var obj = {
					car_series: '',
					// car_model: '',
					car_license: '',
					// modelList: [],
				}
				this.carslist.push(obj)

				this.query.selectViewport().scrollOffset().exec(res => {
					var scrollTop = res[0].scrollTop + 380
					uni.pageScrollTo({
						scrollTop: scrollTop,
						duration: 300
					});
				});
			},
			delCars(index) {
				this.carslist.splice(index, 1)
				this.query.selectViewport().scrollOffset().exec(res => {
					var scrollTop = res[0].scrollTop - 380
					uni.pageScrollTo({
						scrollTop: scrollTop,
						duration: 300
					});
				});
			},
			changeSeries(index) {
				var car_series = this.carslist[index].car_series
				var item = this.seriesList.find(function(item) {
					return item.value === car_series;
				});
				if (item) {
					this.carslist[index].modelList = item.model
				}
			},
			nextStep() {
				var that = this
				if (that.step == 1) {
					if (that.cjActive.length == 0) {
						uni.showToast({
							title: '请选择您的用车场景',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					}
					that.step = that.step + 1
					that.getCityList()
					var params = {
						event_code: '加入车友会',
						path: 'pages/group/groupjoin',
						event_id: '',
						title: '',
						source_page: '加入车友会选择场景-下一步',
						value: '',
					}
					app.BurialPoint(params)

				} else if (that.step == 2) {
					if (that.city_id == '') {
						uni.showToast({
							title: '请选择城市',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					} else if (that.company_id == '') {
						uni.showToast({
							title: '请选择经销商',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					}
					that.step = that.step + 1
					var params = {
						event_code: '加入车友会',
						path: 'pages/group/groupjoin',
						event_id: '',
						title: '',
						source_page: '加入车友会选择车友会-下一步',
						value: '',
					}
					app.BurialPoint(params)
				} else if (that.step == 3) {
					if (that.userinfo.wx_avatar == '') {
						uni.showToast({
							title: '请上传您的头像',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					}
					if (that.userinfo.wx_username == '') {
						uni.showToast({
							title: '请填写您的昵称',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					}
					if (that.name == '') {
						uni.showToast({
							title: '请填写您的姓名',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					}
					if (that.mobile == '') {
						uni.showToast({
							title: '请填写您的电话',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					} else {
						if (!(/^1[3456789]\d{9}$/.test(that.mobile))) {
							uni.showToast({
								title: '请填写正确的电话',
								icon: 'none',
								duration: 1500
							});
							return false;
						}
					}
					if (that.sex == '') {
						uni.showToast({
							title: '请选择您的性别',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					}
					if (that.birthday == '') {
						uni.showToast({
							title: '请选择您的出生日期',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false;
					}
					that.carslist.forEach((item, index) => {
						if (!item.car_series) {

							uni.showToast({
								title: '请选择您的车系',
								mask: true,
								icon: 'none',
								duration: 1500
							})
							throw new Error('请选择您的车系')
							return false;
						} else if (!item.car_license) {
							uni.showToast({
								title: '请上传您的行驶证信息',
								mask: true,
								icon: 'none',
								duration: 1500
							})
							throw new Error('请上传您的行驶证信息')
							return false;
						}
					});

					console.log(that.carslist)
					var obj = {
						join_id: that.join_id,
						scene: that.scene,
						company_id: that.company_id,
						club_id: that.club_id,
						name: that.name,
						mobile: that.mobile,
						sex: that.sex,
						birthday: that.birthday,
						car_series_one: that.carslist[0] ? that.carslist[0].car_series : '',
						car_license_one: that.carslist[0] ? that.carslist[0].car_license : '',
						car_series_two: that.carslist[1] ? that.carslist[1].car_series : '',
						car_license_two: that.carslist[1] ? that.carslist[1].car_license : '',
						car_series_three: that.carslist[2] ? that.carslist[2].car_series : '',
						car_license_threee: that.carslist[2] ? that.carslist[2].car_license : '',
						wx_avatar: that.userinfo.wx_avatar,
						wx_username: that.userinfo.wx_username,
						register_channel: uni.getStorageSync('Appoptions').query ? uni.getStorageSync('Appoptions')
							.query.register_channel : '',
					}
					console.log(obj)
					uni.showModal({
						content: '确认提交申请吗？',
						confirmText: '确认',
						confirmColor: '#00A0DC',
						success: function(res) {
							if (res.confirm) {
								submitClubJion(obj).then(res => {
									if (res.state == 1) {
										that.step = that.step + 1
										getClubJionInfo({}).then(res => {
											if (res.state == 1) {
												var info = res.data.info
												that.name = info.name
												that.mobile = info.mobile
												that.club_title = info.club_title
												that.sex = info.sex
												that.birthday = info.birthday
												that.status_text = info.status_text
												that.refuse_reason = info
													.refuse_reason
												that.car_series_one = info.car_series_one
												that.car_license_one = info.car_license_one
												that.car_series_two = info.car_series_two
												that.car_license_two = info.car_license_two
												that.car_series_three = info.car_series_three
												that.car_license_three = info.car_license_three
												that.popup_text = info.popup_text
												that.status = info.status
												const appOptions = uni.getStorageSync(
													'Appoptions');
												if (
													appOptions &&
													appOptions.query &&
													appOptions.query.register_channel &&
													appOptions.query.register_channel ===
													'活动抽奖'
												) {
													appOptions.query
														.register_channel = ''
													uni.setStorage({
														data: appOptions,
														key: 'Appoptions',
													})
												}

												// that.getLotteryInfod()
												that.getHuodongLotteryInfod()
												that.getGroupUserInfo()
											} else {
												uni.showToast({
													title: res.error[0],
													mask: true,
													icon: 'none',
													duration: 1500
												})
											}
										})
									} else {
										uni.showToast({
											title: res.error[0],
											mask: true,
											icon: 'none',
											duration: 1500
										})
									}
								})
								var params = {
									event_code: '加入车友会',
									path: 'pages/group/groupjoin',
									event_id: '',
									title: '',
									source_page: '加入车友会填写入会信息-提交申请',
									value: '',
								}
								app.BurialPoint(params)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (that.step == 4) {
					if (that.status == 0 || that.status == 2) {
						// that.getClubJionInfo()
						uni.showModal({
							content: '确定重新提交吗？',
							confirmColor: '#00A0DC',
							success: function(res) {
								if (res.confirm) {
									that.step = 1
									that.value = 0
									that.name = ''
									that.mobile = ''
									that.citylist = []
									that.city_id = ''
									that.city_name = ''
									that.companylist = []
									that.companyGrouplist = []
									that.company_id = ''
									that.company_name = ''
									that.cjActive = []
									that.carimglist = []
									that.driver_card = []
									that.license = []
									that.sex = ''
									that.birthday = ''
									that.carslist = [{
										car_series: '',
										// car_model: '',
										car_license: '',
										// modelList: [],
									}]
									var list = uni.getStorageSync('clubconfig').scene_arr ? uni.getStorageSync(
											'clubconfig')
										.scene_arr : []
									if (list.length > 0) {
										list.forEach(function(item, index) {
											item.status = 0
										});
										that.scenelist = list
									}
									var params = {
										event_code: '加入车友会',
										path: 'pages/group/groupjoin',
										event_id: '',
										title: '',
										source_page: '加入车友会-重新提交',
										value: '',
									}
									app.BurialPoint(params)
									that.getGroupUserInfo()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else if (that.status == 1) {
						uni.redirectTo({
							url: '/pages/group/groupinfo?club_id=' + that.club_id
						})
					}

				}
			},
			getHuodongLotteryInfod() {
				var that = this
				getHuodongLotteryInfo().then(res => {
					if (res.state == 1) {
						that.hdlotteryinfo = res.data
							.info
						if (res.data.info.status ==
							0) {
							that.isHDDrawPop = false
							that.popupImg = true
						} else if (res.data.info
							.status == 1) {
							that.isHDDrawPop = true
						} else if (res.data.info
							.status == 2) {
							that.isHDDrawPop = false
							that.popupImg = true
						}
					} else {
						uni.showToast({
							title: res.error[
								0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			uploadCarsImg(index) {
				var that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						var tempFilePaths = res.tempFiles
						uni.uploadFile({
							url: app.globalData.uploadUrl,
							filePath: tempFilePaths[0].tempFilePath,
							name: 'img',
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data));
								var picdata = JSON.parse(uploadFileRes.data);
								that.carslist[index].car_license = picdata.data.img
								// that.license.push(picdata.data.img)
							}
						});
					}
				});
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-上传行驶证',
					value: '',
				}
				app.BurialPoint(params)
			},
			delImg(index) {
				this.license.splice(index, 1);
			},
			bindchooseavatar(e) {
				var that = this
				uni.uploadFile({
					url: app.globalData.uploadUrl,
					filePath: e.detail.avatarUrl,
					name: 'img',
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data));
						var picdata = JSON.parse(uploadFileRes.data);
						that.userinfo.wx_avatar = picdata.data.img
					}
				});
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-修改头像',
					value: '',
				}
				app.BurialPoint(params)
			},
			changeName(e) {
				this.userinfo.wx_username = e.detail.value
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-修改昵称',
					value: '',
				}
				app.BurialPoint(params)
			},
			getGroupUserInfo() {
				getGroupUserInfo({
					user_id: uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : ''
				}).then(res => {
					if (res.state == 1) {
						this.userinfo = res.data.list
						uni.setStorage({
							key: 'userinfo',
							data: res.data.list,
							success: function() {

							}
						});

					} else {
						uni.removeStorage({
							key: 'access_token'
						})
					}
				})
			},
			openOldManPage() {
				uni.redirectTo({
					url: '/pages/group/groupoldmanjoin'
				})
				this.oldManMode = false
				var params = {
					event_code: '加入车友会',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-进入关怀模式',
					value: '',
				}
				app.BurialPoint(params)
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: '斯巴鲁官方车友会',
				path: '/pages/group/group?invitation_id=' + uni.getStorageSync(
					'userinfo') ? uni.getStorageSync('userinfo').user_id : '',
				imageUrl: ''
			}
		}
	}
</script>

<style lang="scss">
	.groupjoin {
		.avatar_box {
			width: 100%;
			text-align: center;
			margin-top: 30rpx;

			button::after {
				border: none;
			}
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 100%;
		}

		.avatar_btn {
			display: flex;
			justify-content: center;
			width: 100% !important;
			background-color: transparent;
			text-align: center;
			font-size: 28rpx;
			font-weight: normal;
		}

		.nickname_box {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			font-size: 28rpx;
			margin-top: 60rpx;
		}

		.editmyinfo_input {
			flex: 1;
			margin-left: 50rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;
			border: 1rpx solid #E9E9E9;
		}

		.popup_img_box {
			position: fixed;
			top: 250rpx;
			left: 60rpx;
			right: 16rpx;
			z-index: 1001;

			.popup_img {
				width: 100%;
				vertical-align: middle;
			}

			.popup_text_box {
				color: #666666;
				font-size: 28rpx;
				position: absolute;
				top: 20%;
				left: 66rpx;
				right: 115rpx;
				z-index: 1002;
				line-height: 42rpx;
			}

			.pop_close_icon_box {
				position: absolute;
				bottom: -80rpx;
				left: 0;
				right: 0;
				z-index: 1002;
				text-align: center;
			}

		}

		.group_carslist_box {
			padding: 25rpx;

			.group_carslist_cell {
				border: 1rpx solid #E9E9E9;
				border-radius: 8rpx;
			}
		}

		.oldman_pop_box {
			position: fixed;
			top: 170rpx;
			left: 43rpx;
			right: 43rpx;
			z-index: 1002;
			background-color: #ffffff;
			border-radius: 8rpx;
			padding: 80rpx 40rpx 100rpx 40rpx;

			.oldman_pop_img {
				width: 189rpx;
				height: 189rpx;
			}
		}
	}
</style>